<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>PrimeFaces Omega</title>
        <script type="text/javascript">
            $(function () {
                $('#menu-button').on('click', function (e) {
                    $('#menu').toggleClass('overlay-menu');
                    e.preventDefault();
                });
            });
        </script>
    </h:head>

    <h:body class="landing-body">
        <h:outputStylesheet library="omega-layout" name="css/layout.css"/>

        <div class="landing-wrapper">
            <div class="landing-header">
                <div class="landing-header-content clearfix">
                    <p:graphicImage value="#{resource['omega-layout:images/logo.png']}" width="113"/>

                    <a id="menu-button" href="#">
                        <span class="fa fa-bars"/>
                    </a>
                    <ul id="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#introduction">Introduction</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#mobile">Mobile</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="#video">Video</a></li>
                    </ul>
                </div>
            </div>

            <div id="introduction">
                <div class="introduction-content">
                    <span class="title">PrimeFaces Omega</span>
                    <span class="subtitle">Clean, Elegant and Functional</span>
                    <p:graphicImage value="#{resource['omega-layout:images/landing/section1_logo.png']}"/>
                    <p:commandButton value="Sign Up" type="button"/>
                </div>
            </div>

            <div id="features">
                <div class="features-content">
                    <span class="feature-title">Omega Features</span>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque.</p>

                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_1.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Responsive</span>
                                <p>Kogi Cosby sweater ethical squid irony disrupt, organic tote bag gluten-free.</p>
                            </span>
                        </div>
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_2.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Clean</span>
                                <p>Bushwick meh Blue Bottle pork belly mustache skateboard 3 wolf moon.</p>
                            </span>
                        </div>
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_3.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Grid</span>
                                <p>Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever.</p>
                            </span>
                        </div>
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_4.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Modern</span>
                                <p>Retro occupy organic, stumptown shabby chic pour-over roof party DIY.</p>
                            </span>
                        </div>
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_5.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Documented</span>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam enim numquam.</p>
                            </span>
                        </div>
                        <div class="ui-g-12 ui-md-4">
                            <p:graphicImage value="#{resource['omega-layout:images/landing/section2_6.png']}" class="feature-icon"/>
                            <span class="feature-text">
                                <span>Support</span>
                                <p>Retro occupy organic, stumptown shabby chic pour-over roof party DIY.</p>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="mobile">
                <div class="mobile-content">
                    <span class="title">Try Our Mobile App!</span>
                    <span class="subtitle">Available at App Store and Google Play.</span>
                    <p:graphicImage value="#{resource['omega-layout:images/landing/section3_mobile.png']}"/>
                    <p:commandButton value="Learn More" type="button"/>
                </div>
            </div>

            <div id="pricing">
                <div class="pricing-content">
                    <span class="pricing-title">Pricing</span>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam.</p>

                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-basic pricing-box">
                                <span class="pricing-name">Basic</span>
                                <div class="pricing-fee">1$</div>

                                <p>50GB Disk Space</p>
                                <p>500GB Monthly Bandwith</p>
                                <p>20 Email Accounts</p>
                                <p>5 Subdomain</p>
                            </div>
                        </div>

                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-standard pricing-box">
                                <span class="pricing-name">Standard</span>
                                <div class="pricing-fee">5$</div>

                                <p>200GB Disk Space</p>
                                <p>1TB Monthly Bandwith</p>
                                <p>50 Email Accounts</p>
                                <p>10 Subdomain</p>
                            </div>
                        </div>

                        <div class="ui-g-12 ui-md-4">
                            <div class="pricing-professional pricing-box">
                                <span class="pricing-name">Professional</span>
                                <div class="pricing-fee">10$</div>

                                <p>2TB Disk Space</p>
                                <p>10TB Monthly Bandwith</p>
                                <p>Unlimited Email Accounts</p>
                                <p>50 Subdomain</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="video">
                <div class="video-content">
                    <span class="video-title">Video</span>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque.</p>
                    <div class="video-container">
                        <iframe src="https://www.youtube.com/embed/B_lYGUtCd0g" frameborder="0" width="560"></iframe>
                    </div>
                </div>
            </div>

            <div class="landing-footer">
                <div class="landing-footer-content">
                    <div class="footer-top">
                        <div class="ui-g">
                            <div class="ui-g-6">
                                <p:graphicImage value="#{resource['omega-layout:images/logo.png']}"/>
                                <p>Omega Premium Layout</p>
                            </div>
                            <div class="ui-g-6">
                                <ul>
                                    <li><a href="#mobile">Mobile</a></li>
                                    <li><a href="#pricing">Pricing</a></li>
                                    <li><a href="#video">Video</a></li>
                                </ul>
                                <ul>
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#introduction">Introduction</a></li>
                                    <li><a href="#features">Features</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="footer-bottom">
                        All Rights Reserved
                    </div>
                </div>
            </div>
        </div>
    </h:body>
</html>